<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="show-time">
            {{year}}-{{month}}-{{day}}  {{hour}}:{{min}}:{{sec}}
        </div>
        <div class="show-time">
            {{dateOption.year}}-{{dateOption.month}}-{{dateOption.day}}  {{dateOption.hour}}:{{dateOption.min}}:{{dateOption.sec}}
        </div>
    </div>
</body>
<script>


    var vm = new Vue({
        el:"#app",
        data:{
            // now: new Date("2024-1-1 00:00:00"),
            now: new Date(),
            timer: null,
        },
        methods:{
            update(){
                clearInterval(this.timer);
                this.timer = setInterval(()=>{
                    this.now = new Date();
                },1000)
            },
            stop(){
                clearInterval(this.timer);
            }
        },
        computed:{
            year(){
                return this.now.getFullYear();
            },
            month(){
                // 月份参数: 0 - 11 
                // 实际月份 = 月份参数 + 1
                var month = this.now.getMonth() + 1
                return month.toString().padStart(2,"0");
            },
            day(){
                var day = this.now.getDate()
                return day.toString().padStart(2,"0");
            },
            hour(){
                var hour = this.now.getHours();
                return   hour.toString().padStart(2,"0");
            },
            min(){
                var min =this.now.getMinutes();
                return  min.toString().padStart(2,"0");
            },
            sec(){
                var sec = this.now.getSeconds();
                return   sec.toString().padStart(2,"0");
            },
            dateOption(){
                var year = this.now.getFullYear();
                var month = this.now.getMonth() + 1;
                var day = this.now.getDate();
                var hour = this.now.getHours();
                var min =this.now.getMinutes();
                var sec = this.now.getSeconds();
                return {
                    year:year,
                    month:month.toString().padStart(2,"0"),
                    day:day.toString().padStart(2,"0"),
                    hour:hour.toString().padStart(2,"0"),
                    min:min.toString().padStart(2,"0"),
                    sec:sec.toString().padStart(2,"0"),
                }
            }
        },
        mounted () {
            console.log(this);
            this.update();
        },
        beforeDestroy () {
            this.stop();
        }

    })


    


</script>
</html>